<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>魏远商城</title>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="/favicon.ico">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/sm.css">
		<link rel="stylesheet" href="css/sm-extend.css">
		<link rel="stylesheet" href="css/ionicons.css">
		<link rel="stylesheet" href="css/my-personal.css">
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/mui.picker.css" />
		<link rel="stylesheet" href="css/mui.poppicker.css" />
		<style type="text/css">
			input::-webkit-input-placeholder {
				color: black;
			}
			
			input::-ms-input-placeholder {
				color: black;
			}
			
			input::-moz-placeholder {
				color: black;
			}
			
			.native-scroll>input:nth-child(1) {
				border-bottom: 1px solid #e9af29!important;
			}
			
			#head {
				position: absolute;
				z-index: 20;
				width: 100%;
				height: 72px;
			}
			
			.item-content input {
				opacity: 0;
				position: absolute;
				z-index: 30;
				width: 100%;
				height: 50px;
			}
			/*点击提交*/
			.tj{
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 11;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.5);;
				opacity: 0.5;
				display: none;
			}
			.tj-z{
				height: 15%;
				/*line-height: 30px;*/
				width: 100%;
				/*background: red;*/
				position: fixed;
				z-index: 15;
				left: 0px;
				top: 250px;
				text-align: center;
				display: none;
			}
			input[type=text]{
				margin: 0;
				border: none;
			}
			.change-email {
			    width: 100%;
			    background-color: #f23030;
			    color: #fff;
			    border: none;
			    height: 40px;
			    border-radius: 2px;
			    margin-top: .75rem;
			}
		</style>
	</head>

	<body style="z-index: 10;">
		<div class="page-group" style="z-index: 1;">
			<div class="page page-current">
				<!--标题栏-->
				<!--<header class="mui-bar mui-bar-nav">
				    <a class="mui-action-back"><img src="img/back-le.png" alt="" height="50%" style="margin-top: 0.5rem;"/></a>
				    <h1 class="mui-title">个人中心</h1>
				</header>-->
				<header class="bar bar-nav">
					<a class="person-back mui-action-back"><img src="img/back-le.png" alt="" height="50%" style="margin-top: 0.5rem;" /></a>
					<!--<a class="button button-link iconfont icon-shuaxin1 pull-right"></a>-->
					<h1 class="title">个人中心</h1>
				</header>
				<!--这里是页面内容区域-->
				<div class="content" style="background: #eaeef1;bottom: 0px;">
					<div class="list-block ">
						<ul>
							<li class="item-content mui-table-view-cell" style="padding: 0;position: relative;height: 70px;">
								<div class="item-inner" id="head">
									<div class="item-title" style="margin-left: 1rem;">更换头像</div>
									<span class="clearfix">
										<div id="p-img" class="p-img pull-left" style="overflow: hidden;">
											<!--<img src="" alt="" id="photo" width="100%" height="100%"/>-->
										</div>
										<i class=""></i>
									</span>
								</div>
								<input type="file" onchange="preview(this)" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" name="" id="fi" value="" />
							</li>
							<li class="item-content" onclick="change_name()">
								<div class="item-inner">
									<div class="item-title">修改昵称</div>
									<span>
										<span class="p-name nickName"></span>
									<i class="ion-chevron-right"></i>
									</span>
								</div>
							</li>
							
							<li class="item-content" onclick="change_email()">
								<div class="item-inner">
									<div class="item-title">修改邮箱</div>
									<span>
										<span class="p-name nickemail"></span>
									<i class="ion-chevron-right"></i>
									</span>
								</div>
							</li>

							<li class="item-content" id="showUserPicker">
								<div class="item-inner">
									<div class="item-title">性别</div>
									<span>
										<span class="p-name sex" id="person-s">男</span>
									<i class="ion-chevron-right"></i>
									</span>
								</div>

							</li>

							<li class="item-content" id="showUserPickers">
								<div class="item-inner">
									<div class="item-title ">年龄</div>
									<span>
										<span class="p-name age" id="person-t">20</span>
									<i class="ion-chevron-right"></i>
									</span>
								</div>

							</li>

							<li class="item-content" id="showUserPickerss">
								<div class="item-inner">
									<div class="item-title ">职业</div>
									<span>
										<span class="p-name job" id="person-o">自由职业</span>
									<i class="ion-chevron-right"></i>
									</span>
								</div>
							</li>

							<li class="item-content" style="border-top: 8px solid #eaeef1;">
								<div class="item-inner">
									<div class="item-title">注册手机号</div>
									<span>
										<span class="p-name ph"></span>
									<!--<i class="ion-chevron-right"></i>-->
									</span>
								</div>

							</li>
						</ul>
					</div>
					<div class="common" id="savezl">保存资料</div>
				</div>
				<!--content end-->
			</div>
		</div>
		<div class="tj"></div>
		<div class="tj-z" style="color: white;">正在保存资料...请耐心等待</div>
		
		<script type="text/javascript" src="js/zepto.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/sm.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/sm-extend.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="js/common.js" charset="UTF-8"></script>
		<script src="js/url.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script type="text/javascript">
			//获取资料		
			//注册号码
			var ph = localStorage.phone;
			var ph = ph.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
			var email74 = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
			$('.ph').text(ph);
			//		更改资料
			$('#savezl').on('tap', function() {
//				alert($('#p-img img').attr('src'))
				var imgText=$('#p-img img').attr('src');
				var iiemail = $('.nickemail').text();
				if(imgText.indexOf("undefined") > 0 ){
				    mui.toast('给自己上传一张头像吧');
				    return;
				}else if($('.nickName').text() == '') {
					mui.toast('取一个好名字吧');
					return;
				}else if(iiemail==''){
					mui.toast('邮箱不能为空');
						
				}else if(!email74.test(iiemail)){
						mui.toast('请输入符合规格的邮箱');
						
					}else {
					$('.tj').css('display','block');
					$('.tj-z').css('display','block');
					tjzl();
					var imgPath = $('#p-img>img').attr('src');

					if(imgPath.indexOf('http')<0){
						uploadHead(imgPath);
					}
					
					function uploadHead(imgPath) {
						var image = new Image();
						image.style.width = "100px";
						image.style.height = "100px";
						image.src = imgPath; //传过来的图片的路径
						image.onload = function() {
							
							var imgData = getBase64Image(image);
							tjtx(imgData);
							
						}
					}
					//	压缩图片
					function getBase64Image(image) {
						var canvas = document.createElement("canvas"); //创建一个canvas节点
						var width = image.width;
						var height = image.height;
						canvas.width = width;
						canvas.height = height;
						var ctx = canvas.getContext('2d'); //创建canvas对象 
						ctx.drawImage(image, 0, 0, width, height); //绘图
						var dataURL = canvas.toDataURL("image/jpeg", 0.5);
						return dataURL;
					}
				}
			})
			
			function pd() {
				$('#mui-toast-container').css('display', 'inline-block')
				//				$('.mui-toast-message').html('请检查您输入的手机号码);
				setTimeout(function() {
					$('#mui-toast-container').css('display', 'none')
				}, 1000)
			}
			
			hqzl();
			//提交资料接口
			function tjzl() {
				var nickname = localStorage.nickname;
				var age = $('.age').text();
				var job = $('.job').text();
				var iiemail = $('.nickemail').text();
				var sex;
				if($('.sex').text() == '女') {
					sex = 2;
				} else {
					sex = 1;
				}
								
				$.ajax({
					url: ur + '/mobilemember/frontmember/edit',
					type: 'post',
					dataType: 'json',
					headers: {
						'X-Token': localStorage.token
					},
					data: {
						'memberVO.email': iiemail,
						'memberVO.nickName': nickname,
						'userInformationVO.job': job,
						'userInformationVO.ufAgeRange': age,
						'userInformationVO.ufSex': sex
					},
					success: function(data) {
						if(data.code=='操作成功'){
							$('.tj').css('display','none');
							$('.tj-z').css('display','none');
							//成功返回
							mui.toast('保存资料成功')
							mui.back();
						}
						
					},
					error: function(e) {
						console.log(JSON.stringify(e) + '提交资料接口错误');
					}
				})
			        
			}

            // 修改邮箱
			function change_email() {
				var popupHTML = '<div class="popup">' +
					'<div class="page-group">' +
					'<div class="page page-current">' +
					'<header class="bar bar-nav">' +
					'<a class="button button-link ion-android-close pull-right close-popup"></a>' +
					'<h1 class="title">修改邮箱</h1>' +
					'</header>' +
					'<div class="content" style="padding: .75rem;">' +
					'<input type="text" class="c-email" value="' + $('.nickemail').text() + '" maxlength="20"/>' +
					'<p class="rule">用户邮箱规则：请输入符合规格的邮箱</p>' +
					'<input class="change-email close-popup" id="nick" type="button" value="修改邮箱" />' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>'
				$.popup(popupHTML);
				$('.change-email').on('tap', function() {
					var b = $('.c-email').val();
					
					$('.nickemail').text(b);
				});
			}



			// 修改昵称
			function change_name() {
				var popupHTML = '<div class="popup">' +
					'<div class="page-group">' +
					'<div class="page page-current">' +
					'<header class="bar bar-nav">' +
					'<a class="button button-link ion-android-close pull-right close-popup"></a>' +
					'<h1 class="title">修改昵称</h1>' +
					'</header>' +
					'<div class="content" style="padding: .75rem;">' +
					'<input type="text" class="c-name" value="' + $('.nickName').text() + '" maxlength="9"/>' +
					'<p class="rule">用户昵称规则：可使用中文、大写英文、小写英文、数字、下划线及其组合</p>' +
					'<input class="change-name close-popup" id="nick" type="button" value="修改昵称" />' +
					'</div>' +
					'</div>' +
					'</div>' +
					'</div>'
				$.popup(popupHTML);
				$('.change-name').on('tap', function() {
					var b = $('.c-name').val();
					localStorage.nickname = b;
					$('.nickName').text(b);
				});
			}
			$.init(); // 初始化组件
			//更换头像	
			//			var photo = document.getElementById('photo');
			function preview(file) { //预览图片得到图片base64
				var prevDiv = document.getElementById('p-img');
				console.log(JSON.stringify(file.files[0]) + "文件0000");
				console.log(JSON.stringify(file.files) + "文件1111");
				if(file.files && file.files[0]) {
					var reader = new FileReader();
					reader.readAsDataURL(file.files[0]);
					reader.onload = function(evt) {
						prevDiv.innerHTML = '<img src="' + evt.target.result + '" width="100%" height="100%" />';
					}
					//					FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。使用Data URL的好处是，您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料；而缺点便是，网页的大小可能会变大。它适合应用在内嵌小图片，不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。
				} else {
					prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
				}
			}
			//			$('#head').click(function() {
			//				
			//			})
			//		处理图片大小
			function uploadHead(imgPath) {
				//			生成比例
				var image = new Image();
				image.style.width = "100px";
				image.style.height = "100px";
				image.src = imgPath; //传过来的图片的路径
				image.onload = function() {
					//压缩图片
					var imgData = getBase64Image(image);
				}
			}
			//	压缩图片
			function getBase64Image(img) {
				var canvas = document.createElement("canvas"); //找到canvas元素
				var width = img.width;
				var height = img.height;
				canvas.width = width;
				canvas.height = height;
				var ctx = canvas.getContext('2d'); //创建canvas对象 
				ctx.drawImage(img, 0, 0, width, height); //绘图
				var dataURL = canvas.toDataURL("image/jpeg", 0.5);
				//			return dataURL.replace("data:image/jpeg;base64,", "");
				return dataURL;
			}
			//提交头像
			function tjtx(pic) {
				console.log('217' + pic + '头像');
				$.ajax({
					url: ur + '/mobilemember/frontmember/updateHeadPortrait',
					type: 'post',
					dataType: 'json',
					headers: {
						'X-Token': localStorage.token
					},
					data: {
						'fileName': 'head.jpg',
						'photo': pic
					},
					success: function(data) {
						if(data.code=='操作成功'){
							tjzl();
						}
						
					},
					error: function(e) {
						console.log(e)
					}
				})
			}
			//获取资料接口
			function hqzl() {
				$.ajax({
					url: ur + '/mobilemember/frontmember/getInfo',
					type: 'post',
					dataType: 'json',
					headers: {
						'X-Token': localStorage.token
					},
					data: '',
					success: function(data) {
						console.log(JSON.stringify(data))
						console.log((data.result.data.nickName) + '>>>>');
						var prevDiv = document.getElementById('p-img');
						var i = (picur + data.result.data.headphoto);
						prevDiv.innerHTML = '<img src="' + i + '" width="100%" height="100%" />';
						console.log(data);

						if(data.result.data.sex == 1) {
							$('.sex').text('男');
						} else {
							$('.sex').text('女');
						}
						localStorage.headphoto = data.result.data.headphoto;
						console.log(localStorage.headphoto + '本地头像')
						//						$('#photo').attr('src', picur + data.result.data.headphoto)
						$('.nickName').text(data.result.data.nickName);
						$('.nickemail').text(data.result.data.email);
						localStorage.nicheng1 = data.result.data.nickName;
						localStorage.nickname = data.result.data.nickName;
						$('.age').text(data.result.data.age);
						$('.job').text(data.result.data.job);

					},
					error: function(e) {
						console.log(JSON.stringify(e) + '0000');
					}
				})
			}
			(function($, doc) {
				$.init();
				$.ready(function() {
					//选择性别
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						text: '男'
					}, {
						text: '女'
					}]);
					var persons = doc.getElementById('person-s');
					var showUserPickerButton = doc.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							persons.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//选择年龄
					var oldPicker = new $.PopPicker();
					oldPicker.setData([{ text: '16' }, { text: '17' }, { text: '18' }, { text: '19' }, { text: '20' }, { text: '21' }, { text: '22' }, { text: '23' }, { text: '24' }, { text: '25' }, { text: '26' }, { text: '27' }, { text: '28' }, { text: '29' }, { text: '30' }, { text: '31' }, { text: '32' }, { text: '33' }, { text: '34' }, { text: '35' }, { text: '36' }, { text: '37' }, { text: '38' }, { text: '39' }, { text: '40' }, { text: '41' }, { text: '42' }, { text: '43' }, { text: '44' }, { text: '45' }, { text: '46' }, { text: '47' }, { text: '48' }, { text: '49' }, { text: '50' }, { text: '51' }, { text: '52' }, { text: '53' }, { text: '54' }, { text: '55' }, { text: '56' }, { text: '57' }, { text: '58' }, { text: '59' }, { text: '60' }, { text: '61' }]);
					var persont = doc.getElementById('person-t');
					var showUserPickerButtons = doc.getElementById('showUserPickers');
					showUserPickerButtons.addEventListener('tap', function(event) {
						oldPicker.show(function(items) {
							persont.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);
					//选择职业
					var oPicker = new $.PopPicker();
					oPicker.setData([{
						text: '自由职业'
					}, {
						text: '白领'
					}, {
						text: '学生'
					}, {
						text: '金领'
					}]);
					var persono = doc.getElementById('person-o');
					var showUserPickerButtonss = doc.getElementById('showUserPickerss');
					showUserPickerButtonss.addEventListener('tap', function(event) {
						oPicker.show(function(items) {
							persono.innerText = items[0].text;
							//返回 false 可以阻止选择框的关闭
							//return false;
						});
					}, false);

				});
			})(mui, document);

			//			选择年龄
		</script>
	</body>

</html>